<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>统计</title>
    <!--layUI-->
    <link rel="stylesheet" href="/aaa/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/aaa/layuiadmin/style/admin.css" media="all">
    <script src="/aaa/layuiadmin/layui/layui.js"></script>
    <!--echarts-->
    <script src="/aaa/echarts/echarts.js"></script>
</head>
<body>
<body>
<!--条件-->
<div class="layui-fluid">
    <div class="layui-card" id="init">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">年份</label>
                    <div class="layui-input-block">
                        <select id="year">
                            <option value="2019">2019</option>
                            <option value="2018">2018</option>
                            <option value="2017">2017</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">条件</label>
                    <div class="layui-input-block">
                        <select id="condition">
                            <option value="1">月份</option>
                            <option value="2">季度</option>
                            <option value="3">分类</option>
                            <option value="4">校区</option>
                            <option value="5">站点</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">开始时间：</label>
                    <div class="layui-input-block">
                        <input type="text" id="startTime" name="startTime" placeholder="请输入开始时间" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                至
                <div class="layui-inline">
                    <label class="layui-form-label">截止时间：</label>
                    <div class="layui-input-block">
                        <input type="text" id="endTime" name="endTime" placeholder="请输入截止时间" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button id="check" class="layui-btn layuiadmin-btn-useradmin" lay-submit
                            lay-filter="LAY-user-front-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                    <button type="reset" id="reset" class="layui-btn layuiadmin-btn-useradmin">重置</button>
                </div>
            </div>
        </div>
        <!--四个放置统计图的容器-->
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="main1" style="width:600px;height:350px;display:inline-block;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="main2" style="width:600px;height:350px;display:inline-block;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="main3" style="width:600px;height:350px;display:inline-block;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="main4" style="width:600px;height:350px;display:inline-block;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="none">
    layui.use([ 'form', 'element', 'laydate'], function () {
        var $ = layui.$
            , form = layui.form
            , laydate = layui.laydate
            , element = layui.element

        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main1'));
        var myChart2 = echarts.init(document.getElementById('main2'));
        var myChart3 = echarts.init(document.getElementById('main3'));
        var myChart4 = echarts.init(document.getElementById('main4'));
        $.post('/aaa/statistics/findBatterySalesInfo',
            {
                "year": $("#year").val(),
                "condition": $("#condition").val(),
                "startTime": $("#startTime").val(),
                "endTime": $("#endTime").val()
            },
            function (datas) {

                        // 指定图表的配置项和数据--电瓶车销量统计
                        var option1 = {
                            title: {
                                text: '电瓶车销量统计'
                            },
                            toolbox: { //可视化的工具箱
                                show: true,
                                feature: {
                                    saveAsImage: {//保存图片
                                        show: true
                                    },
                                    magicType: {//动态类型切换
                                        type: ['bar', 'line']
                                    }
                                }
                            },
                            tooltip: {},
                            legend: {
                                data: ['电瓶车销量']
                            },
                            xAxis: {
                                data: datas.bxdata
                            },
                            yAxis: {},
                            series: [{
                                name: '电瓶车销量',
                                type: 'bar',
                                data: datas.bnum
                            }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        //电瓶车销售统计
                        myChart1.setOption(option1);

                        // 指定图表的配置项和数据--电瓶车销量统计
                        var option2 = {
                            title: {
                                text: '电瓶车零件销量统计'
                            },
                            toolbox: { //可视化的工具箱
                                show: true,
                                feature: {
                                    saveAsImage: {//保存图片
                                        show: true
                                    },
                                    magicType: {//动态类型切换
                                        type: ['bar', 'line']
                                    }
                                }
                            },
                            tooltip: {},
                            legend: {
                                data: ['零件销量']
                            },
                            xAxis: {
                                data: datas.bcxdata
                            },
                            yAxis: {},
                            series: [{
                                name: '零件销量',
                                type: 'bar',
                                data: datas.bcnum
                            }]
                        };

                        // 使用刚指定的配置项和数据显示图表----电瓶车销售统计
                        myChart2.setOption(option2);

                        // 指定图表的配置项和数据--修车量统计
                        var option3 = {
                            title: {
                                text: '修车量统计'
                            },
                            toolbox: { //可视化的工具箱
                                show: true,
                                feature: {
                                    saveAsImage: {//保存图片
                                        show: true
                                    },
                                    magicType: {//动态类型切换
                                        type: ['bar', 'line']
                                    }
                                }
                            },
                            tooltip: {},
                            legend: {
                                data: ['修车量']
                            },
                            xAxis: {
                                data: datas.rxdata
                            },
                            yAxis: {},
                            series: [{
                                name: '修车量',
                                type: 'bar',
                                data: datas.rnum
                            }]
                        };
                        myChart3.setOption(option3);

                        // 指定图表的配置项和数据--电瓶更换次数统计
                        var option4 = {
                            title: {
                                text: '电瓶更换次数统计'
                            },
                            toolbox: { //可视化的工具箱
                                show: true,
                                feature: {
                                    saveAsImage: {//保存图片
                                        show: true
                                    },
                                    magicType: {//动态类型切换
                                        type: ['bar', 'line']
                                    }
                                }
                            },
                            tooltip: {},
                            legend: {
                                data: ['电瓶更换次数']
                            },
                            xAxis: {
                                data: datas.cbxdata
                            },
                            yAxis: {},
                            series: [{
                                name: '电瓶更换次数',
                                type: 'bar',
                                data: datas.cbnum
                            }]
                        };
                        myChart4.setOption(option4);
                    })
        $("#check").click(function () {
            $.post('/aaa/statistics/findBatterySalesInfo',
                {
                    "year": $("#year").val(),
                    "condition": $("#condition").val(),
                    "startTime": $("#startTime").val(),
                    "endTime": $("#endTime").val()
                },
                function (datas) {
                    myChart1.clear();
                    myChart2.clear();
                    myChart3.clear();
                    myChart4.clear();
                    var condition=$("#condition").val();
                    if (condition=="5"){
                        myChart4 = echarts.init(document.getElementById('main1'));
                    }else {
                        myChart4 = echarts.init(document.getElementById('main4'));
                    }
                    // 指定图表的配置项和数据--电瓶车销量统计
                    var option1 = {
                        title: {
                            text: '电瓶车销量统计'
                        },
                        toolbox: { //可视化的工具箱
                            show: true,
                            feature: {
                                saveAsImage: {//保存图片
                                    show: true
                                },
                                magicType: {//动态类型切换
                                    type: ['bar', 'line']
                                }
                            }
                        },
                        tooltip: {},
                        legend: {
                            data: ['电瓶车销量']
                        },
                        xAxis: {
                            data: datas.bxdata
                        },
                        yAxis: {},
                        series: [{
                            name: '电瓶车销量',
                            type: 'bar',
                            data: datas.bnum
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    //电瓶车销售统计
                    if(datas.bxdata.length!=0) {
                        myChart1.setOption(option1);
                    }
                    // 指定图表的配置项和数据--电瓶车销量统计
                    var option2 = {
                        title: {
                            text: '电瓶车零件销量统计'
                        },
                        toolbox: { //可视化的工具箱
                            show: true,
                            feature: {
                                saveAsImage: {//保存图片
                                    show: true
                                },
                                magicType: {//动态类型切换
                                    type: ['bar', 'line']
                                }
                            }
                        },
                        tooltip: {},
                        legend: {
                            data: ['零件销量']
                        },
                        xAxis: {
                            data: datas.bcxdata
                        },
                        yAxis: {},
                        series: [{
                            name: '零件销量',
                            type: 'bar',
                            data: datas.bcnum
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表----电瓶车销售统计
                    if(datas.bcxdata.length!=0) {
                        myChart2.setOption(option2);
                    }
                    // 指定图表的配置项和数据--修车量统计
                    var option3 = {
                        title: {
                            text: '修车量统计'
                        },
                        toolbox: { //可视化的工具箱
                            show: true,
                            feature: {
                                saveAsImage: {//保存图片
                                    show: true
                                },
                                magicType: {//动态类型切换
                                    type: ['bar', 'line']
                                }
                            }
                        },
                        tooltip: {},
                        legend: {
                            data: ['修车量']
                        },
                        xAxis: {
                            data: datas.rxdata
                        },
                        yAxis: {},
                        series: [{
                            name: '修车量',
                            type: 'bar',
                            data: datas.rnum
                        }]
                    };
                    //判断后台没有维修的信息，让图表不显示
                    if(datas.rxdata.length!=0) {
                        myChart3.setOption(option3);
                    }
                    // 指定图表的配置项和数据--电瓶更换次数统计
                    var option4 = {
                        title: {
                            text: '电瓶更换次数统计'
                        },
                        toolbox: { //可视化的工具箱
                            show: true,
                            feature: {
                                saveAsImage: {//保存图片
                                    show: true
                                },
                                magicType: {//动态类型切换
                                    type: ['bar', 'line']
                                }
                            }
                        },
                        tooltip: {},
                        legend: {
                            data: ['电瓶更换次数']
                        },
                        xAxis: {
                            data: datas.cbxdata,
                            // 问题---坐标轴刻度标签的显示间隔，在类目轴中有效。
                            //添加如下---默认会采用标签不重叠的策略间隔显示标签，可以设置成 0 强制显示所有标签。
                            type: 'category',
                            axisLabel :{
                                interval:0
                            }
                        },
                        yAxis: {},
                        series: [{
                            name: '电瓶更换次数',
                            type: 'bar',
                            data: datas.cbnum
                        }]
                    };
                    //判断后台没有更换电瓶的信息，让图表不显示
                    if (datas.cbxdata.length!=0) {
                        myChart4.setOption(option4);
                    }
                })
        });
        //验证--开始时间必须比当前时间小--截止时间必须比起止时间大
        //当前时间
        var nowTime = new Date().valueOf();
        var startTime= laydate.render({
            elem: '#startTime'
            ,type: 'datetime'
            //设置一个默认最大值  
            ,max:nowTime   
            ,
            done: function (value, dates) {
                endTime.config.min ={
                    year:dates.year,
                    month:dates.month-1, //关键 
                    date: dates.date,
                    hours: 0,
                    minutes: 0,
                    seconds : 0
                };
            }
        });
        //渲染结束时间选择 
        var endTime= laydate.render({
            //通过id绑定html中插入的end 
            elem: '#endTime',
            type: 'datetime',
            //设置min默认最小值 
            min:nowTime,
            done: function (value, dates) {
                startTime.config.max={
                    year:dates.year,
                    month:dates.month-1,//关键  
                    date: dates.date,
                    hours: 0,
                    minutes: 0,
                    seconds : 0
                }
            }
        });
        //重置
        $("#reset").click(function(){
            location.reload();
        });
    })
</script>
</body>
</body>
</html>